<script>
  import $ from 'dfish-widget'
  import Dialog from './Dialog.vue'
  import text from '../widget.text.js'

  export default {
    mixins: [Dialog],
    data() {
      return {
        name: 'Tip',
        remark: '提示气泡',
        extends: [text],
        deprecate: 'title,cover,commander,full-screen,click:cover',
        
        slots: [{
          name: 'text',
          remark: '显示内容。可以使用本插槽来显示html内容。',
          option: ''
        }],
				examples: [
          {
				  remark: '鼠标移到按钮上显示tip',
				  type: 'html',
					view: true,
				  code: `
            <template>
              <w-tip text="Tip提示" :hover-show-drop="true">
                <w-button text="按钮"></w-button>
              </w-tip>
            </template>
				  `
				}, 
        {
				  remark: '使用pop方法展示tip',
				  type: 'html',
					view: true,
				  code: `
            <template>
              <div>请在文本框内输入任意字符：</div>
              <w-text @change="showTip"></w-text>
            </template>
            <${'script'}>
              import $ from 'dfish-widget'
              export default {
                methods: {
                  showTip(e, val) {
                    if (val) {
                      $(e).pop('w-tip', {text: \`您已输入\${val.length}个字符\`, face: 'warn'}, {mode: 'single'})
                    } else {
                      $(e).closePop('w-tip')
                    }
                  }
                }
              }
            </${'script'}>
				  `,
          comp: {
          	methods: {
              showTip(e, val) {
                if (val) {
                  $(e).pop('w-tip', {text: `您已输入${val.length}个字符`, face: 'warn'}, {mode: 'single'})
                } else {
                  $(e).closePop('w-tip')
                }
              }
          	}
          }
				}]
      }
    },
    created() {
      this.merge([
      {
        name: 'escape',
        remark: '设置为false，文本参数text将以html格式显示。',
        type: 'Boolean',
        default: 'true'
      }, {
        name: 'prong',
        type: 'Boolean',
        remark: '是否显示一个箭头图标',
        default: 'true'
      }, {
        name: 'face',
        type: 'String',
        remark: '展示效果',
        option: '<var>info</var><var>warn</var>',
        default: 'info'
      }, {
        name: 'visible/v-model:visible',
        type: 'Boolean',
        remark: '是否可见。如果没有设置本参数，将由mouseenter或click事件来触发显示。',
        option: '',
        default: 'false'
      }], 'attrs')
    }
  }
</script>
